<template>
  <p :class="type">
    <span v-if="time">[{{ time }}] </span>
    <span v-html="message"></span>
    <span class="info ml-2" v-if="countdown"> [{{ countdownNumber }}s] </span>
  </p>
</template>
<script lang="ts">
export default {
  name: 'Msg',
  props: {
    type: {
      type: String,
      default: 'success',
    },
    message: {
      type: String,
    },
    time: {
      type: String,
    },
    countdown: {
      type: [Number, undefined],
    },
  },
  data() {
    return {
      countdownNumber: this.countdown,
    }
  },
  created() {
    if (this.countdown) {
      this.countdownNumber = this.countdown
      let timer = setInterval(() => {
        this.countdownNumber--
        if (this.countdownNumber <= 0) {
          clearInterval(timer)
          timer = null
        }
      }, 1000)
    }
  },
}
</script>
<style scoped>
p {
  margin: 5px 0;
}
.success {
  color: #67c23a;
}
.failed {
  color: #f56c6c;
}
.warning {
  color: #e6a23c;
}
.info {
  color: #909399;
}
</style>
